<template>
  <div class="page-container">
    <div class="page-header">
      <div class="page-tile">{{ $t('workOrder.PendingPageTitle') }}</div>
      <div class="left-wrapper"></div>
      <div class="right-wrapper"></div>
    </div>
    <el-scrollbar class="page-content">
      <div class="content-wrapper">
        <el-card>
          <basic-table :pageMethod="(pageQuery) => {
            pageQuery.result_code = 'open';
            pageQuery.search = searchValue;
            if (tableSearch) {
                pageQuery.page = 1;
                tableSearch = false;
              }
            if (AuthModule.authrole === 'system_admin') {
              pageQuery.cloud_tenant_id = cloudTenantSearchId;
            }
            return $pandaApi.apiGetWorkorders(pageQuery);
          }">
            <template #table-options="tableSlotData">
              <div class="table-left-options">
                <el-button class="icon-button setting-button" style="width: auto;" :disabled="tableSlotData.table.selectRows.length <= 0" @click="$refs.ApprovalDialop.init('agree', tableSlotData.table.selectRows)">
                  <i class="el-icon-check" style="font-size: 12px; margin-right: 5px;"></i>
                  <span style="font-size: 12px;">{{ $t('workOrder.Agree') }}</span>
                </el-button>
                <el-button class="icon-button setting-button" style="width: auto;" :disabled="tableSlotData.table.selectRows.length <= 0" @click="$refs.ApprovalDialop.init('refuse', tableSlotData.table.selectRows)">
                  <i class="el-icon-close" style="font-size: 12px; margin-right: 5px;"></i>
                  <span style="font-size: 12px;">{{ $t('workOrder.Refuse') }}</span>
                </el-button>
                <el-button v-if="AuthModule.authrole === 'system_admin'" class="icon-button setting-button" style="width: auto;" :disabled="tableSlotData.table.selectRows.length <= 0 || hangUpLoading" @click="$refs.ApprovalDialop.init('hangUp', tableSlotData.table.selectRows)">
                  <i class="el-icon-close" style="font-size: 12px; margin-right: 5px;"></i>
                  <span style="font-size: 12px;">{{ $t('workOrder.HangUp') }}</span>
                </el-button>
                <el-dropdown v-if="AuthModule.authrole === 'tenant_admin'" style="margin-left: 10px;" @command="(cmd) => {
                    $refs.ApprovalDialop.init(cmd, tableSlotData.table.selectRows)
                }" :hide-on-click="false">
                  <el-button class="icon-button setting-button" style="width: auto;">
                    <span style="font-size: 12px;">{{ $t('workOrder.More') }}</span>
                    <i class="el-icon-arrow-down el-icon--right" style="font-size: 12px; margin-left: 5px;"></i>
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <!-- <el-dropdown-item :disabled="tableSlotData.table.selectRows.length <= 0 || replyLoading" :command="'reply'">{{ $t('workOrder.Reply') }}<i v-if="replyLoading" class="el-icon-loading" style="color: #333333; margin-left: 5px;"></i></el-dropdown-item> -->
                    <el-dropdown-item :disabled="tableSlotData.table.selectRows.length <= 0 || hangUpLoading" :command="'hangUp'">{{ $t('workOrder.HangUp') }}<i v-if="hangUpLoading" class="el-icon-loading" style="color: #333333; margin-left: 5px;"></i></el-dropdown-item>
                    <el-dropdown-item :disabled="tableSlotData.table.selectRows.length <= 0 || reportLoading" :command="'report'">{{ $t('workOrder.Report') }}<i v-if="reportLoading" class="el-icon-loading" style="color: #333333; margin-left: 5px;"></i></el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
              <div class="table-right-options">
                <tenant-user-select v-model="cloudTenantSearchId"></tenant-user-select>
                <el-input v-model="searchValue" :placeholder="$t('workOrder.PendingPageTableSearch')" @keyup.enter.native="tableSearchChange(tableSlotData)" style="width:200px">
                </el-input>
                <el-button @click="tableSearchChange(tableSlotData)" type="primary" style="margin-left: 10px;" >{{ $t('common.search') }}</el-button>
              </div>
            </template>
            <template #table-column="tableSlotData">
              <el-table-column type="selection" width="40" align="center"></el-table-column>
              <el-table-column
                :label="$t('workOrder.postTime')"
              >
                <template #default="props">
                  <span>{{parseTime(new Date(props.row.created_at))}}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="cloud_tenant_name"
                :label="$t('common.tenant')"
                v-if="AuthModule.authrole === 'system_admin'"
              >
                <!-- <template #default="props">
                  {{ initTenantName(props.row.cloud_tenant_id) }}
                </template> -->
              </el-table-column>
              <el-table-column :label="$t('workOrder.postUser')">
                <template #default="props">
                  <span>{{ props.row.user_name }}</span>
                </template>
              </el-table-column>
              <el-table-column
                :label="$t('workOrder.theme')"
              >
                <template #default="props">
                  <span>{{ $t("workOrder.function." + props.row.function) }}</span>
                </template>
              </el-table-column>
               <el-table-column :label="$t('workOrder.detail')" prop="arguments" width="80">
                <template #default="props">
                    <el-link slot="reference" style="font-size:12px" :underline="false" type="primary" @click="initData(props.row)">{{$t('common.details')}}</el-link>
                </template>
              </el-table-column>
             <el-table-column
                :label="$t('workOrder.resultDetail')"
                prop="result_detail"
              >
                <template #default="props">
                  <el-tooltip placement="left" width="200" trigger="hover">
                    <p slot="content" style="max-width:600px;margin:0px;padding:3px">{{ props.row.result_detail }}</p>
                    <el-link
                      :underline="false"
                      type="primary"
                      style="font-size: 12px"
                      >{{ delContext(props.row.result_detail) }}</el-link
                    >
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column :label="$t('common.action')" width="180">
                <template #default="props">
                  <link-button :content="$t('workOrder.Agree')" :size="10" :font-size="'12px'" style="margin-right: 15px;" @click="$refs.ApprovalDialop.init('agree', [props.row])"/>
                  <link-button :content="$t('workOrder.Refuse')" :size="10" :font-size="'12px'" style="margin-right: 15px;" @click="$refs.ApprovalDialop.init('refuse', [props.row])"/>
                  <el-dropdown style="margin-left: 10px;cursor: pointer;" @command="(cmd) => {
                    $refs.ApprovalDialop.init(cmd, [props.row])
                  }">
                    <span class="el-dropdown-link">
                      {{$t('common.More')}}<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <!-- <el-dropdown-item :command="'reply'">{{$t('workOrder.Reply')}}</el-dropdown-item> -->
                      <el-dropdown-item :command="'hangUp'">{{ $t('workOrder.HangUp') }}</el-dropdown-item>
                      <el-dropdown-item v-if="AuthModule.authrole === 'tenant_admin'" :command="'report'">{{ $t('workOrder.Report') }}</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </template>
              </el-table-column>
            </template>
            <template #others-elements="tableSlotData">
              <approval-dialop ref="ApprovalDialop" :submit-method="(type, items, approval_comments) => {
                const ids = items.map((row) => row.id);
                return $pandaApi.apiBatchHandleWorkorders(ids, type, approval_comments).then(() => {
                  tableSlotData.table.refresh();
                });
              }" />
              <order-details ref="OrderDetails"></order-details>
            </template>
          </basic-table>
        </el-card>
      </div>
    </el-scrollbar>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
import BasicTable from '../../components/Basic/Table/BasicTable.vue';
import LinkButton from "../../components/Basic/Button/LinkButton.vue";
import { AppModule } from '../../store/modules/app';
import { Language } from '../../utils/auth';
import { parseTime } from '../../utils';
import KeyValue from '../../components/Basic/KeyValue/KeyValue.vue';
import ApprovalDialop from './components/ApprovalDialop.vue';
import { AuthModule } from '../../store/modules/auth';
import OrderDetails from "./components/OrderDetails.vue";
import TenantUserSelect from "../../components/Basic/Select/tenant-users-select.vue";
export default Vue.extend({
  components: {
    BasicTable,
    LinkButton,
    KeyValue,
    ApprovalDialop,
    OrderDetails,
    TenantUserSelect
  },
  computed: {
    Language: () => Language,
    parseTime: () => parseTime,
    AuthModule: () => AuthModule
  },
  data() {
    return {
      replyLoading: false, // 答复loading
      hangUpLoading: false, // 挂起loading
      reportLoading: false, // 上报loading
      cloudTenantLoading: false, // 云租户loading

      cloudTenantList: [{
        id:'',
        name:''
      }],
      searchValue: "",
      cloudTenantSearchId: "",
      tableSearch: false
    }
  },
  created() {
    if (AuthModule.authrole === "system_admin") {
      (this as any).getCloudTenantList();
    }
  },
  methods: {
    // 页面刷新重置page
    tableSearchChange(table: any) {
      (this as any).tableSearch = true;
      table.table.refresh(true);
    },
    // initTenantName(id: any) {
    //   for(let i in (this as any).cloudTenantList) {
    //     if (id === (this as any).cloudTenantList[i].id) {
    //       return (this as any).cloudTenantList[i].name
    //     }
    //   }
    //   return ;
    // },
    delContext(str: any){
      if(str.length > 20) {
        return str.substr(0,20) + '...'
      }
      return str;
    },
    getCloudTenantList() {
      (this as any).cloudTenantLoading = true;
      (this as any).$tunnyApi.apiGetTenantList({}).then((res: any) => {
        res = res.sort((a: any, b: any) => (a.name).localeCompare((b.name), 'zh-Hans-CN', { sensitivity: 'accent' }));
        (this as any).cloudTenantList = res;
        (this as any).cloudTenantLoading = false;
      });
    },
    initData(data: any) {
      let res = JSON.parse(JSON.stringify(data));
      (this as any).$refs.OrderDetails.init(res);
    },
  }
})
</script>
<style lang="scss" scoped>
.page-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #EFF1F4;

  .page-header {
    height: 60px;
    background-color: #FFFFFF;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #D9D9D9;

    .page-tile {
      color: #031129;
      font-size: 16px;
      margin-left: 20px;

      .iconzhongyiicon_gaojing {
        margin-left: 5px;
      }
    }
  }

  .page-content {
    height: calc(100vh - 110px);
    overflow: hidden;
    flex-grow: 1;

    .content-wrapper {
      padding: 15px;
    }
  }
}

.table-left-options {
  display: flex;
}

.table-right-options {
  display: flex;

  .setting-button {
    margin-right: 10px;
  }
}
</style>
